<template>
  <!-- 标签管理页面 -->
  <div class="app-container">
    <!-- 卡片面板主区域 -->
    <el-card>
      <!-- 面包屑导航 -->
      <el-breadcrumb v-if="queryVal.id"
                     separator-class="el-icon-arrow-right"
                     style="border-bottom: 1px solid #ebeef5;padding: 0 20px 18px;margin-bottom: 20px;">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ queryVal.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索nav栏 -->
      <el-row :gutter="10">
        <!-- 搜索框 -->
        <el-form ref="searchFrom"
                 :model="searchFrom"
                 label-width="80px">
          <el-col :span="6">
            <el-form-item label="标签名称"
                          prop="searchName">
              <el-input placeholder="请输入内容"
                        v-model="searchFrom.searchName"
                        clearable
                        @clear="clearSearch"
                        style=" width: 200px;"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  style="width:100px">
            <el-form-item label="状态"
                          style="text-align:lef;margin-left:-150px"
                          prop="searchState">
              <el-select v-model="searchFrom.searchState"
                         placeholder="请选择"
                         style=" width: 200px;">
                <el-option label="禁用"
                           value="0"> </el-option>
                <el-option label="已启用"
                           value="1"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
        <el-col :span="6"
                style="margin-left:40px">
          <el-button size="small"
                     plain
                     @click="clearSearch">清除</el-button>
          <el-button size="small"
                     type="primary"
                     @click="clickSearch">搜索</el-button>
        </el-col>
        <!-- 新增学科按钮 -->
        <div style="text-align:right">
          <el-button v-if="queryVal.id"
                     type="text"
                     @click="$router.back()"><i class="el-icon-wind-power"> 返回学科</i></el-button>
          <el-button class="colright"
                     size="mini"
                     type="success"
                     icon="el-icon-edit"
                     @click="clickAdd">新增学科</el-button>
        </div>
      </el-row>
      <!--   消息文案  alert组件 -->
      <el-alert :title="`数据一共 ${counts} 条`"
                :closable="false"
                type="info"
                show-icon> </el-alert>
      <!-- 表格区域 -->
      <tags-table :tagsList="tagsList"
                  @changeState="getTagsList"
                  @edit="clickEdit"
                  :value="params.page"
                  @input="params.page--"></tags-table>
      <br />
      <!-- 分页器 -->
      <div>
        <el-pagination style="text-align: right"
                       background
                       :page-sizes="[5, 10, 20, 50]"
                       :page-size="params.pagesize"
                       :current-page="params.page"
                       :total="counts"
                       @size-change="sizeChange"
                       @current-change="numChange"
                       layout=" prev, pager, next,sizes, jumper">
        </el-pagination>
      </div>
      <!-- 添加弹框 -->

      <el-dialog :title="clickState == 'add' ? '新增标签' : '修改标签'"
                 :visible.sync="isDialog"
                 width="25%">
        <tags-add v-if="isDialog"
                  :isState="clickState"
                  :simpleSubject="simpleList"
                  :getVal="editId"
                  @close="diaClose"
                  :query="queryVal"></tags-add>
      </el-dialog>

      <!-- 修改弹框 -->
      <!-- <el-dialog title="修改学科" :visible.sync="isEditShow" width="25%">
        <subjects-edit :getid="id" @close="isEditShow = false" @updateList="clearSearch" v-if="isEditShow"></subjects-edit>
      </el-dialog>  -->
    </el-card>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/tags'
import { simple } from '@/api/hmmm/subjects'
import tagsTable from '@/module-hmmm/components/tags-table'
import tagsAdd from '@/module-hmmm/components/tags-add'
export default {
  name: 'Tags',
  components: {
    tagsTable,
    tagsAdd
  },
  data() {
    return {
      clickState: '', //存放添加还是修改
      params: {
        page: 1, //当前页数
        pagesize: 10, //当前条数
        subjectID: null, //学科ID
        tagName: null, //标签名称
        state: null //状态 1为开启 0为屏蔽
      },
      searchFrom: {
        searchName: '',
        searchState: null
      },
      tagsList: [], //存放列表数据
      counts: null, //总数
      isDialog: false,
      simpleList: [], //简易科学列表
      editId: null, //存放点击项的id
      queryVal: this.$route.query //存放跳转过来的查询参数
    }
  },
  created() {
    if (this.queryVal.id) {
      this.params.subjectID = this.queryVal.id
      this.getTagsList()
    } else {
      this.getTagsList()
    }
    this.getSimpleSubject()
  },

  methods: {
    //   获取标签列表
    async getTagsList() {
      try {
        let { data: res } = await list(this.params)
        this.tagsList = res.items
        this.counts = res.counts
      } catch (error) {
        console.dir(error)
        this.$message.error('获取标签列表失败')
      }
    },
    //  获取建议学科列表
    async getSimpleSubject() {
      try {
        let { data: res } = await simple()
        this.simpleList = res
      } catch (error) {
        this.$message.error('获取简易学科列表失败')
      }
    },
    clickSearch() {
      this.params.tagName = this.searchFrom.searchName
      this.params.state = this.searchFrom.searchState
      this.params.page = 1
      this.getTagsList()
    },
    // 清除按钮点击
    clearSearch() {
      this.params.tagName = ''
      this.params.state = null
      this.$refs.searchFrom.resetFields()
      this.params.page = 1
      this.getTagsList()
    },
    // 点击添加事件
    clickAdd() {
      this.clickState = 'add'
      this.isDialog = true
    },
    // 点击修改事件
    clickEdit(val) {
      this.editId = val
      this.clickState = 'edit'
      this.isDialog = true
    },
    // 弹框关闭事件
    diaClose() {
      this.isDialog = false
      this.params.page = 1
      this.getTagsList()
    },
    sizeChange(val) {
      //val是最新的每页数量
      this.params.pagesize = val
      this.getTagsList()
    },
    numChange(val) {
      //val是最新的页码数
      this.params.page = val
      this.getTagsList()
    }
  }
}
</script>

<style scoped lang="less"></style>
